<template>
	<div id="insuranceExplain">
		<div class="main">
			<p class="title">{{title}}说明</p>
			<div v-html="insuranceRule"></div>
			
		</div>
		<div class="btn">
			<mu-raised-button @click="sure()" fullWidth label="完成" class="demo-raised-button" secondary/>		
		</div>
	</div>
</template>
<script>	
	import { mapState, mapMutations } from 'vuex'
	import { getNewToken } from '../../config/util'
	export default {
		data() {
			return {
				title:"",
				insuranceRule:"",
			};
		},
		computed:{
			...mapState([
				'token'
			]),	
		},
		methods:{
			...mapMutations([
				'RECORD_TOKEN'
			]),
			sure(){
				this.$router.go(-1);
			},
			getExplain(){
				var id = this.$route.query.id;
				this.$axios.get('/insurance/detail/'+id, {
						headers: {'authorization':this.token}
					})
					.then((res) => {
						this.RECORD_TOKEN({type:"update",val:getNewToken(res.headers)});
						this.title = res.data.displayName;
						this.insuranceRule = res.data.insuranceRule.replace(/\n/g, "<br/>");
					})
					.catch((error) => {
	
					})
			},
		},
		created() {
			document.title = "保险说明";
			this.getExplain();
		},		
		components: {
			
		}
	};
</script>
<style lang="scss">
	@import '../../style/mixin.scss';
	@import "./style.scss";
	#insuranceExplain{
		display:flex;
		flex-direction:column;
		height:100vh;
		.main{
			flex-grow:1;
			padding:0 4%;
			overflow:auto;
			@include border_1px_b($shadow);
			.title{
				font-size: 18px;
				text-align: center;
				line-height: 40px;
				font-weight: 900;
			}
		}
		.btn{			
			padding:0 4%;
			min-height:50px;
			background: $white;
			display:flex;
			align-items:center;
		}
	}

</style>